<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
		<title>口语考试</title>
		<meta name="keywords" content="口语考试" />
		<meta name="description" content="口语考试" />
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css" />
		<link rel="stylesheet" type="text/css" href="css/radialindicator.css" />
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<script type="text/javascript" src="js/api.js"></script>
		<!-- fonticon -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
		<!-- animate.css -->
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
		<!-- swiper -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.min.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
		<!-- 饼图 -->
		<script src="//cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
		<script src="//cdn.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
		<script src="//cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
		<script src="//cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>

		<link rel="stylesheet" type="text/css" href="css/oraltest.css" />

	</head>

	<body class="fadeIn animated">
		<div id="message" v-cloak>
			<div class="box col-4 h10 f30  w12" style="padding-left: 0.3rem;margin-top: 0.3rem;">
				<div class="f28 w12">交卷人数</div>
				<div class="f32 w12" style="padding-bottom: 0.2rem;padding-top: 0.1rem;color: #343d4a;font-weight: bold;text-align:center"
				 v-cloak>{{complete.count}}</div>
			</div>
			<div class="box col-8 h10 f30" style="padding-right: 0.3rem;margin-top: 0.3rem;" @click="notjoinStu()">
				<div class="grid t-r clearfix">
					<div class="box col-12 f28">缺考人数<span style="color:#36c86b ;" v-cloak>{{notjoin.count}}</span><img src="img/ic_zhankaixiao.png"
						 style="margin-left: 0.1rem;margin-top: -0.05rem;" /></div>
				</div>
				<div class="f30  t-r" style="padding-bottom: 0.2rem;padding-top: 0.1rem;color: #343d4a;font-weight: bold;" v-cloak>
					<img :src="item.img" class="w5 h5 radius-o ml1" v-for="(item, index) in notjoin.list" v-if='index<=4' />
				</div>

			</div>

			<div class="box col-12 tab-test-analyse">
				<section class="swiper-container">
					<div class="tabindexList">
						<span class="p2 pl4 pr4 color5 color8 f30">试卷分析</span>
						<span class="p2 pl4 pr4 color8 f30">成绩分析</span>
						<span class="p2 pl4 pr4 color8 f30">题目分析</span>
					</div>
					<div class="swiper-wrapper">
						<!------------------------试卷分析 ent---------------------------------->
						<div class="swiper-slide">
							<div class="grid clearfix">
								<div id="score-container" class="h45 pt2" ></div>
							</div>

							<div class="grid clearfix difference">
								<div class="box t-c col-6 f28 std">
									<div class="t-c radius10 bg-color3 pt2">
										<div class="f28">标准差</div>
										<div class="f32 difference-value" v-cloak>{{standard_deviation}}</div>
									</div>
								</div>
								<div class="box t-c col-6 f28 variance">
									<div class="t-c radius10 bg-color3  pt2">
										<div class="f28">方差</div>
										<div class="f32 difference-value" v-cloak>{{variance}}</div>
									</div>
								</div>
							</div>

							<div class="grid clearfix">
								<div class="grid  clearfix stu-info-title">
									<div class="box col-12 h10 f30"><span class="f30">学生成绩</span></div>
								</div>
								<div class="grid  clearfix" style="line-height: 1rem;">
									<div class="grid clearfix" style="background: #FFFFFF;">
										<div class="box col-4 t-c h10 f30"><span class="f30 stu-info-title-span">姓名</span></div>
										<div class="box col-4 t-c h10 f30"><span class="f30 stu-info-title-span">分数</span></div>
										<div class="box col-4 t-c h10 f30"><span class="f30 stu-info-title-span">用时</span></div>
									</div>
								</div>
								<div class="grid  clearfix" style="line-height: 1rem;" v-for="(item, index) in stulist" v-cloak>
									<div class="grid clearfix" style="background: #f7faff;" v-if="index%2 ==0" @click="stuDetails(item)" >
										<div class="box col-4 t-c h10 f30" style="color: #343d4a;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><span
											 class="f30" style="color: #343d4a;">{{item.username}}</span></div>
										<div class="box col-4 t-c h10 f30"><span class="f30" style="color: #343d4a;">{{item.avscore}}</span></div>
										<div class="box col-4 t-c h10 f30">
											<span class="f30" style="color: #343d4a;">{{item.nuse_time | formatSToHs}}</span>
											<img v-if="item.nuse_time != 1000000000000000 && item.nuse_time != ''" src="img/ic_zhankaixiao.png" style="margin-left: 0.1rem;margin-top: -0.05rem;" />
										</div>
									</div>
									<div class="grid clearfix" style="background: #FFFFFF;" v-else v-cloak @click="stuDetails(item)">
										<div class="box col-4 t-c h10 f30" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><span
											 class="f30" style="color: #343d4a;">{{item.username}}</span></div>
										<div class="box col-4 t-c h10 f30"><span class="f30" style="color: #343d4a;">{{item.avscore}}</span></div>
										<div class="box col-4 t-c h10 f30">
											<span class="f30" style="color: #343d4a;">{{item.nuse_time | formatSToHs}}</span>
											<img v-if="item.nuse_time != 1000000000000000 && item.nuse_time != ''" src="img/ic_zhankaixiao.png" style="margin-left: 0.1rem;margin-top: -0.05rem;" />
										</div>
									</div>
								</div>

							</div>



						</div>
						<!------------------------试卷分析 ent---------------------------------->

						<!------------------------成绩分析colors: ['#ffca4a', '#ff4a64', '#4581db', '#36c86b']---------------------------------->
						<div class="swiper-slide">
							<div class="grid  tab-content">
								<div id="exam-container" class="h40"></div>
							</div>

							<div class="grid clearfix">
								<div class="grid t-c-h clearfix">
									<div class="box col-2 t-c" style="line-height: 0.3rem;margin-left: 0.7rem;">
										<div class="box t-r col-6">
											<div class="radius5 w3 h3" style="background-color: #36c86b;float:right "></div>
										</div>
										<div class="box col-6"><span class="f28 stu-info-title-span">优秀</span></div>
									</div>
									<div class="box col-2 t-c" style="line-height: 0.3rem;">
										<div class="box t-r col-6">
											<div class="radius5 w3 h3" style="background-color: #4581db;float:right "></div>
										</div>
										<div class="box col-6"><span class="f28 stu-info-title-span">良好</span></div>
									</div>
									<div class="box col-2 t-c" style="line-height: 0.3rem;">
										<div class="box t-r col-6">
											<div class="radius5 w3 h3" style="background-color: #ffca4a;float:right "></div>
										</div>
										<div class="box col-6"><span class="f28 stu-info-title-span">合格</span></div>
									</div>
									<div class="box col-3 t-c" style="line-height: 0.3rem;">
										<div class="box t-r col-6">
											<div class="radius5 w3 h3" style="background-color: #ff4a64;float:right "></div>
										</div>
										<div class="box col-6"><span class="f28 stu-info-title-span">待合格</span></div>
									</div>
								</div>
								<div class="grid  clearfix stu-info-title">
									<div class="box col-12 h10 f30"><span class="f30">学生成绩占比</span></div>
								</div>
								<div class="grid  clearfix" style="line-height: 1rem;">
									<div class="grid clearfix" style="background: #FFFFFF;">
										<div class="box col-4 t-c h10 f30"><span class="f30 stu-info-title-span">等级</span></div>
										<div class="box col-4 t-c h10 f30"><span class="f30 stu-info-title-span">人数</span></div>
										<div class="box col-4 t-c h10 f30"><span class="f30 stu-info-title-span">占比</span></div>
									</div>
								</div>
								<div class="grid clearfix" style="background: #f7faff;">
									<div class="box col-4 t-c h10 f30" style="color: #343d4a;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 1rem;"><span
										 class="f30" style="color: #343d4a;">优秀[85-100]</span></div>
									<div class="box col-4 t-c h10 f30" style="line-height: 1rem;"><span class="f30" style="color: #343d4a;">{{scoreDistriInfo.excellent}}</span></div>
									<div class="box col-4 t-c h10 f30" style="line-height: 1rem;"><span class="f30" style="color: #343d4a;">{{[scoreDistriInfo.excellent,scoreDistriInfo.count] | numLawFilter}}%</span></div>
								</div>
								<div class="grid clearfix" style="background: #FFFFFF;">
									<div class="box col-4 t-c h10 f30" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 1rem;"><span
										 class="f30 t-c" style="color: #343d4a;">良好[75-85]</span></div>
									<div class="box col-4 t-c h10 f30" style="line-height: 1rem;"><span class="f30" style="color: #343d4a;">{{scoreDistriInfo.good}}</span></div>
									<div class="box col-4 t-c h10 f30" style="line-height: 1rem;"><span class="f30" style="color: #343d4a;">{{[scoreDistriInfo.good,scoreDistriInfo.count] | numLawFilter}}%</span></div>
								</div>
								<div class="grid clearfix" style="background: #f7faff;">
									<div class="box col-4 t-c h10 f30" style="color: #343d4a;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 1rem;"><span
										 class="f30" style="color: #343d4a;">合格[60-75]</span></div>
									<div class="box col-4 t-c h10 f30" style="line-height: 1rem;"><span class="f30" style="color: #343d4a;">{{scoreDistriInfo.qualified}}</span></div>
									<div class="box col-4 t-c h10 f30" style="line-height: 1rem;"><span class="f30" style="color: #343d4a;">{{[scoreDistriInfo.qualified,scoreDistriInfo.count] | numLawFilter}}%</span></div>
								</div>
								<div class="grid clearfix" style="background: #FFFFFF;">
									<div class="box col-4 t-c h10 f30" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 1rem;"><span
										 class="f30" style="color: #343d4a;">待合格[0-60]</span></div>
									<div class="box col-4 t-c h10 f30" style="line-height: 1rem;"><span class="f30" style="color: #343d4a;">{{scoreDistriInfo.difference}}</span></div>
									<div class="box col-4 t-c h10 f30" style="line-height: 1rem;"><span class="f30" style="color: #343d4a;">{{[scoreDistriInfo.difference,scoreDistriInfo.count] | numLawFilter}}%</span></div>
								</div>
							</div>

						</div>
						<!------------------------成绩分析 ent---------------------------------->

						<!------------------------题目分析---------------------------------->
						<div class="swiper-slide">
							<div class="grid  tab-content">
								<div id="histogram-container" class="h50"></div>
							</div>

							<div class="grid  clearfix stu-info-title">
								<div class="box col-12 h10 f32"><span class="f30">题目成绩</span></div>
							</div>
							<div v-for="(pentItem, pentIndex) in examdetails.list" v-cloak>
								<div class="grid  clearfix que-title">
									<div class="box col-12 h8 f30 ml3">
										<span class="f30" v-if="pentItem.stem_type == 1">{{pentIndex+1}}.单词朗读</span>
										<span class="f30" v-else-if="pentItem.stem_type == 2">{{pentIndex+1}}.单词朗读</span>
										<span class="f30" v-else-if="pentItem.stem_type == 3">{{pentIndex+1}}.回答问题</span>
										<span class="f30" v-else-if="pentItem.stem_type == 4">{{pentIndex+1}}.短文朗读</span>
									</div>
								</div>
									<div class="grid  clearfix">
										<div class="grid clearfix ml3 mr3">
											<div class="box col-5 h5 t-c f28"><span class="que-title-span">班均分：{{pentItem.avg_score}}(满分{{pentItem.score}})</span></div>
											<div class="box col-4 h5 t-c f28"><span class="que-title-span">平均用时：{{pentItem.avg_time}}</span></div>
											<div class="box col-3 h5 t-c f28"><span class="que-title-span">得分率：{{pentItem.score_rate | scoreRate}}%</span></div>
										</div>
									</div>
									<div class="line  mt2"></div>
									<div class="listbox ml3 t-c mt3">
										<div class="htmleaf-container t-c col-2 mr2 mb2" v-for="(itemDetails, index) in pentItem.list" @click="quseScoreDeatils(pentItem,itemDetails)">
											<div class="indicatorContainer" :id="forId(pentItem,itemDetails)" >{{[pentItem,itemDetails] | initProgress}}</div>
											<div class="t-c f28" v-if="pentIndex == 0">第{{itemDetails.num}}题</div>
											<div class="t-c f28" v-else-if="pentIndex == 1">第{{examdetails.list[0].list.length + itemDetails.num}}题</div>
											<div class="t-c f28" v-else-if="pentIndex == 2">第{{examdetails.list[0].list.length +examdetails.list[1].list.length + itemDetails.num}}题</div>
											<div class="t-c f28" v-else-if="pentIndex == 3">第{{examdetails.list[0].list.length + examdetails.list[1].list.length + examdetails.list[2].list.length + itemDetails.num}}题</div>
										</div>
										
									</div>
							</div>
							
							
							
						</div>
						<!------------------------题目分析 ent---------------------------------->
					</div>
				</section>

			</div>


		</div>
	</body>


	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js"></script>
	<!-- 百度 CDN: -->
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/radialIndicator.js"></script>
	<script type="text/javascript" src="js/oraltest.js"></script>


</html>
